<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="70px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="选择日期"> 
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker v-model="query.startDate" :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" @change="startDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">-</el-col>
                                <el-col :span="11">
                                    <el-date-picker v-model="query.endDate" :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2"  @change="endDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>              
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="8">
                        <el-form-item class="btn-apply">
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="exportTable()">导出</el-button>
                    <el-button @click="sendIntegral()">发放积分</el-button>
                    <span class="table-inter">积分余额：{{integralBalance}}</span>
                </div>
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column label="日期" align="center">
                    <template scope="scope">
                        <span>{{scope.row.date | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="发放积分" align="center">
                    <template scope="scope">
                        <span>{{scope.row.pointInput | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="价值金额（元）" align="center">
                    <template scope="scope">
                        <span>{{ !scope.row.rechangeCash?'--':Number(scope.row.rechangeCash).toFixed(2) }}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="运营昨日剩余积分" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.pointOutput | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作人" align="center">
                    <template scope="scope">
                        <span>{{scope.row.auditorName | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="备注" align="center">
                    <template scope="scope">
                        <span>{{scope.row.auditDesc | isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <!-- 发放积分 -->
        <send-integral :integralData='integralData' @search='queryData' @upScore='getScore'></send-integral>
    </div>
</template>

<script>
    import moment from 'moment';
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import sendIntegral from './sendIntegral';
    import { queryPointIssue, financialScore } from 'api/integralManage';
    import { mapState, mapActions } from 'vuex';

    export default {
        name: 'opInteTable',
        components: { Levelbar, TableLayout, sendIntegral },
        data() {
            return { 
                integralData: {
                    dialogState: false
                },
                loading: true,  
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    startDate: '',
                    endDate: ''
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now());
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now());
                    }
                },
                integralBalance: 0
            }
        },
        watch: {// 局部刷新列表
            cacheUpdated(val) {
                val && this.queryData();
            }
        },

        created() {
            this.queryData();
            this.getScore();
        },
        computed: {
            ...mapState({
                config: state => state.config.table,
                cacheUpdated: state => state.app.cacheUpdated//
            })
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            queryData() {
                let dataStart = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY-MM-DD'); // 查询开始时间
                let dataEnd = this.query.endDate==''?'':moment(this.query.endDate).format('YYYY-MM-DD'); // 查询结束时间 
                
                queryPointIssue(this.pageQuery.currentpage, this.config.pageSize, dataStart, dataEnd).then(response => {
                    this.loading = false;
                    if (response.data.content !== null) {
                        this.tableData = response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total;
                    } else {
                        this.tableData = response.data.content;
                        this.pageQuery.total = 0;
                    }                                    
                }).catch(() => {
                    this.loading = false;
                })
            },
            startDateChange(date) {
                this.pickerOptions2 = {
                    disabledDate(time) {
                        return (time.getTime() < new Date(date).getTime() - 864e5) || (time.getTime() > new Date().getTime());
                    }
                }
            },
            endDateChange(date) {
                if (date) {
                    this.pickerOptions1 = {
                        disabledDate(time) {
                            return (time.getTime() > new Date(date).getTime() - 864e5);
                        }
                    }
                } else {
                    this.pickerOptions1 = {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    }
                }
            },

            // 导出
            exportTable() {
                let dataStart = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY-MM-DD'); // 查询开始时间
                let dataEnd = this.query.endDate==''?'':moment(this.query.endDate).format('YYYY-MM-DD'); // 查询结束时间 
                window.location.href = `${LOCAL_API.cm}/point/manage/outExcelByPointIssue?dataStart=${dataStart}&dataEnd=${dataEnd}`;
            },

            // 发放积分
            sendIntegral() {
                this.integralData.dialogState = true;
            },

            // 运营积分管理-积分余额
            getScore() {
                financialScore().then(res => {
                    this.integralBalance = res.data.content.sPoint; 
                }).catch(() => {
                    this.integralBalance = 0;
                })
            }
        }

    }
</script>

<style lang="scss" scoped>
    .main-content {
        .btn-apply {
            float: right;
        }
        .table-title {
            clear: both;
            overflow: hidden;
        }
        .table-inter {
            padding-left: 15px;
        }
    }  
</style>

